import React, {useCallback, useEffect, useRef, useState} from "react"
import {
    getCheckInventoryRecordDetail,
    CheckInventoryRecordDetail,
    CheckInventoryRecordItem
} from "../../apis/CheckInventoryRecordApi";
import {Col, Descriptions, Row, theme} from "antd";
import {convertAntdTableToExcel, ExportedColumnProps} from "../../utils/AntdTableUtils";
import DataPageLayout from "../../components/DataPageLayout";
import ArrayUtils from "@zxy-cn/array-utils";
import dashboardPageStore from "../../store/DashboardPageStore";
import {observerDashboardPageWrapper} from "../../components/dashboardPages/ObserverDashboardPageWrapper";
import LoadableButton from "../../components/LoadableButton";
import {saveWorkbookTo} from "../../utils/FileSaver";
import GoodsTable from "../../components/GoodsTable";
import {OffsetDateTime} from "@js-joda/core";
import {DATE_WITH_TIME_FORMATER, YEAR_MONTH_DAY_FORMATER} from "../../utils/Date";


export interface pageProps {
    id: number
}

const myPath = "checkInventoryRecords/{id}"

const CheckInventoryRecordDetailPage: React.FC<pageProps> = ({id}) => {
    const [loading, setLoading] = useState(false)
    const [data, setData] = useState<CheckInventoryRecordDetail>()
    const query = useCallback(() => {
        setLoading(true)
        getCheckInventoryRecordDetail(id).then(response => {
            dashboardPageStore.setTitle(myPath.replace("{id}", id.toString()), response.data.name)
            setData(response.data)
        }).finally(() => {
            setLoading(false)
        })
    }, [id])

    useEffect(() => {
        query()
    }, [query]);

    let token = theme.useToken();

    let columnsRef = useRef<ExportedColumnProps<CheckInventoryRecordItem>[]>();

    return (
        <>
            {!loading && !!data ? <Descriptions title={"订单明细"}>
                <Descriptions.Item
                    label={"盘点时间"}>{data.createdDateTime.format(DATE_WITH_TIME_FORMATER)}</Descriptions.Item>
                <Descriptions.Item label={"创建人"}>{data?.createdBy?.name}</Descriptions.Item>
                {!!data?.submitDateTime && <Descriptions.Item
                    label={"提交时间"}>{data.createdDateTime.format(DATE_WITH_TIME_FORMATER)}</Descriptions.Item>}
            </Descriptions> : null}
            <Row gutter={8} style={{margin: "12px 0"}}>
                <Col>
                    <LoadableButton onClick={async (event) => {
                        let workbook = await convertAntdTableToExcel(columnsRef.current!!, data?.items ?? []);
                        await saveWorkbookTo(workbook, `${data?.name?? "导出数据"}` )
                    }}>
                        导出
                    </LoadableButton>
                </Col>
            </Row>

            <DataPageLayout>
                <GoodsTable<CheckInventoryRecordItem> loading={loading}
                                                      size={"small"}
                                                      customColumns={columns => {
                                                          ArrayUtils.insertAfter(columns, value => value.dataIndex === "name", {
                                                              dataIndex: "amountInOrder",
                                                              title: "数量",
                                                          },)
                                                          columnsRef.current = columns;
                                                          return columns;
                                                      }}
                                                      rowKey={"id"} data={data?.items ?? []}>
                </GoodsTable>
            </DataPageLayout>

        </>
    )
}

export default observerDashboardPageWrapper(CheckInventoryRecordDetailPage, myPath, "盘点详情")

